<template>
	<view class="flex-center content">
		<view class="flex-center flex-col" style="width:600rpx">
			<text class=" custom-icon" :class="info.icon" :style="{
				fontSize: '60px',
				color:info.color
			}"></text>
			<view class="mt5">
				<u-text color="#333" :text="info.title"></u-text>
			</view>
			<view class="mt5 flex-center flex-col">
				<template v-if="info.status == 0">
					<u-text color="#909399" :text="info.subTitle"></u-text>
					<view class="mt10" style="width: 250rpx;">
						<u-button type="primary" shape="circle">前往购油</u-button>
					</view>
				</template>
				<template v-if="info.status == 1">
					<u-text color="#909399" :text="`失败原因：${rejectReasons}`"></u-text>
					<view class="mt10" style="width: 250rpx;">
						<u-button type="primary" shape="circle">重新申请</u-button>
					</view>
				</template>
				<template v-if="info.status == 2">
					<u-text color="#909399" :text="info.subTitle"></u-text>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';

	const statusList = reactive([{
			status: 0,
			title: '信息审核通过',
			icon: 'custom-icon-tongyong_wancheng_16',
			color: '#00C800'
		},
		{
			status: 1,
			title: '信息审核失败',
			icon: 'custom-icon-shenhezhuangtai-shenhebohui',
			color: '#FC4040'
		},
		{
			status: 2,
			title: '信息正在审核中',
			icon: 'custom-icon-tongyong_shenhezhong_16',
			subTitle: '预计1-3个工作日审核完成',
			color: "#F97D1D"
		}
	])
	const status = ref(0);
	const rejectReasons = ref('不合格不合格信息正在审核中信息正在审核中信息正在审核中信息正在审核中信息正在审核中')
	const info = computed(() => {
		return statusList.find(item => item.status == status.value);
	})
</script>

<style lang="scss">
	.content {
		margin-top: 100rpx;
	}
</style>